/**
 * Created by Ysssssss on 21/1/19.
 */
import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import { ACTIVITY_LIST_MAP } from '@constants/ActivityListMap'
import { getPromotionStats, getCoupons } from '@sagas/marketing'
import { getAxios } from "@utils/api";
import { connect } from "react-redux";
import marketArrayParams from '@utils/marketArrayParams'
import IntroduceModal from '@components/marketing/modal/IntroduceModal'
@withRouter
@connect(({ marketing }) => ({
    promotionStats: marketing.promotionStats,
}), {
    getPromotionStats,
    getCoupons
})
class MarketingPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            amountObj: {}
        }
        this.introduceModalRef = React.createRef()
        this.getStats = this.getStats.bind(this)
        this.showActivityRules = this.showActivityRules.bind(this)
    }

    componentDidMount() {
        this.getStats()
    }

    async getStats() {
        const { getCoupons } = this.props
        const quota_cut = await getAxios('/market/promotionWithStats', {
            promotion_statuses: marketArrayParams('published'),
            offer_types: marketArrayParams('quota_cut'),
        })
        const discount = await getAxios('/market/promotionWithStats', {
            promotion_statuses: marketArrayParams('published'),
            offer_types: marketArrayParams('discount'),
        })

        getCoupons({
            coupon_statuses: marketArrayParams('published')
        }, res => {
            this.setState({
                amountObj: {
                    ...this.state.amountObj,
                    coupon: res.total || 0,
                    quota_cut: quota_cut.total,
                    discount: discount.total
                }
            })
        })
    }

    showActivityRules(){
        this.introduceModalRef.current?.show()
    }

    showActivity(item) {
        if (!item.link) {
            return
        }
        const { history } = this.props
        history.push(`/marketing/${item.link}`)
    }

    render() {
        const { amountObj } = this.state
        return (
            <div className='marketing-page'>
                <div className='market-title flex-row-between'>
                    <div className='market-title-left'>
                        <div className='ft-24 ft-clr-d'>每日营销</div>
                        <div className='ft-20 ft-clr-l mgt-16'>好营销的基础是得有好产品</div>
                    </div>
                    <div className='market-title-right'>
                        <img className="img" src={require("@assets/image/market_intro.png")} />
                    </div>
                </div>
                <div className='market-tips flex-row-between mgb-16'>
                    <div className='ft-16 ft-clr-md'>营销玩法</div>
                    <div className='ft-14 ft-clr-l cur-poi' onClick={this.showActivityRules} >活动规则</div>
                </div>
                <div className='activity-list clearfix'>
                    {ACTIVITY_LIST_MAP.map((item, index) => {
                        return (
                            <div key={index} className='activity-item cur-poi' onClick={this.showActivity.bind(this, item)}>
                                <div className='icon'><img className="img" src={require(`@assets/image/${item.icon}.png`)} /></div>
                                <div className='center'>
                                    <div className='flex-row-between'>
                                        <div className='ft-14 ft-clr-md'>{item.title}</div>
                                        {item.name && <div className='ft-12 ft-clr-l'>生效中: <span className='clr-orange'>{amountObj[item.name] || 0}</span></div>}
                                    </div>
                                    <div className='ft-12 ft-clr-l mgt-8'>{item.intro}</div>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <IntroduceModal ref={this.introduceModalRef} />
            </div>
        )
    }
}

export default MarketingPage